<script lang="ts">
import ShareBtnBar from '~comp-b/share/ShareBtnBar.vue';
import { TeleportAntdModalFooter } from '~comp/antd-assist';

export const referralSharePopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./ReferralShare.vue')),
  { title: computed(() => $t('0GJs4pQejUs9jwlVOqGxi')), wrapClassName: 'ant-cover__Modal-drawer', centered: true, footer: null },
);
</script>

<script lang="ts" setup>
const props = defineProps<{
  code: string;
  url: string;
}>();
const appStore = useAppStore();
const shareText = ref($t('pN776I6N4ppr6i1FfSa6r', { platform: appStore.appName }));
</script>

<template>
  <div class="text-3.5">
    <div class="border-b-(1px slate-600 dashed) pb-4 text-sys-text-body leading-normal">
      {{ $t('yoPy4txFfy2ogIgjRQj') }}
    </div>
    <div>
      <div class="flex-between pb-3 pt-4 text-sys-text-body">
        {{ $t('xHxDAqewJZrhWlDpnYl1s') }}
      </div>
      <div class="relative rounded-2 bg-sys-layer-a p-4">
        <p class="mb-3 leading-normal">
          {{ shareText }}
        </p>
        <div class="leading-normal">
          <span class="text-sys-text-body">{{ $t('nUj0W3DPxcotAmoLfyk') }}: </span>
          {{ props.url }}
        </div>
      </div>
      <TeleportAntdModalFooter footerClass="!max-w-none !p-0 !mt-1">
        <ShareBtnBar
          class="mobile:(rounded-b-4)"
          :shareUrl="props.url" :text="shareText"
        />
      </TeleportAntdModalFooter>
      <img src="../../assets/imgs/user/share.png" class="mt-4 h-auto w-full">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.share-action {
  --uno: 'flex-1';

  .btn {
    --uno: '!block w-full';
  }

  .name {
    --: 'mt-1 text-sm text-sys-text-body';
  }
}
</style>
